<template>
    <div class="app1">
        <div>
            <el-carousel :interval="4000" type="card" height="350px" width="100%">
                <el-carousel-item v-for="item in imgList" :key="item">
                    <h3><img :src="item" alt=""> </h3>
                </el-carousel-item>
            </el-carousel>

        </div>
        <!--导航-->
        <div style="margin:20px 20px ">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item >首页</el-breadcrumb-item>
                <el-breadcrumb-item>竞赛动态</el-breadcrumb-item>
                <el-breadcrumb-item>竞赛列表</el-breadcrumb-item>
                <el-breadcrumb-item>竞赛详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!--竞赛详情-->
        <div>
            <div class="imag" >
          <img src="../../assets/bg2.jpg" width="500" height="430">
            </div>
            <div class="about">
                <ul class="list">
                    <li>
                        <a><span style="position: relative;left: 10px;">竞赛名称 ： ACM国际邀请赛</span></a>
                    </li>
                    <li>
                        <a><span style="position: relative;left: 10px;">主办方 ： 四川工商学院</span></a>
                    </li>
                    <li>
                        <a><span style="position: relative;left: 10px;">竞赛类型 ： 创新创业</span></a>
                    </li>
                    <li>
                        <a><span style="position: relative;left: 10px;">竞赛等级 ： 国际型</span></a>
                    </li>
                    <li>
                        <a><span style="position: relative;left: 10px;">团队规模 ： 4人</span></a>
                    </li>
                    <li>
                        <a><span style="position: relative;left: 10px;">竞赛地点 ： 四川</span></a>
                    </li>
                    <li>
                        <a><span style="position: relative;left: 10px;">竞赛描述 ：</span></a>
                    </li>
                    <li>
                        <el-button type="danger" plain style=" position: relative;left: 10px;font-size: 15px">立即报名</el-button>

                        <el-button type="primary" plain style="position: relative;left: 15px;font-size: 15px">组队报名</el-button>
                    </li>
                </ul>

            </div>
        </div>
            <!--底部-->


    </div>
</template>

<script>

    export default {
        data() {
            return {
                imgList: [
                    require('../../assets/brige-login.jpg'),
                    require('../../assets/brige-login2.jpg'),
                    require('../../assets/brige-login1.jpg'),
                    require('../../assets/brige1.png'),
                    require('../../assets/brige2.png'),
                    require('../../assets/brige3.png')
                ],

            }
        }
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 350px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .app1{
        overflow: auto;
        width: 100%;
        height:100%;

}
    .about{
        float: right;
        position: relative;

        width: 700px;
        height: 450px;


    }
    .imag{
        float: left;
        position: relative;
        left: 70px;
        border-radius: 5px;
    }
    ul{
        position: relative;
        border-radius: 10px;
        width: 500px;
        height: 450px;
        border: #20a0ff 1px solid;
    }
    ul li{


        list-style: none;

    }
    li{
        line-height: 50px;
        left: 10px;
    }


</style>
